@extends('layouts.app')
@section('style')
    @parent
    <link href="{{ asset('css/dropload.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{asset('fonts/iconfont/iconfont.css')}}">
@endsection
@section('content')
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif
        <div id="setting-box">
            <div class="room-setting">
                <div class="search">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="search" placeholder="搜索群成员">
                </div>
                <ul class="room-users clearfix"></ul>
                <div class="room-op">
                    <div class="group-op">
                        <p>群名</p>
                        <input class="rename-title" type="text" placeholder="点击编辑群名" onblur="this.placeholder='点击编辑群名'" onfocus="this.placeholder=''">
                        <em>✎</em>
                    </div>
                    <div class="group-op">
                        <p>群公告</p>
                        <span class="edit-notice"></span>
                        <em>✎</em>
                    </div>
                </div>
                <div class="out">删除并退出</div>
            </div>
        </div>
        <div id="chat">
        <div class="chat-setting">
            <img class="headpic" src="{{asset('uploads/'.Auth::user()->headpic)}}" alt="" title="{{Auth::user()->name}}">
            <i class="iconfont icon-LC_icon_chat_fill_1 chat bg-color"></i>
            <i class="iconfont icon-tongxunlu  address-list"></i>
            <i class="iconfont icon-shoucang collection"></i>
        </div>
        <div class="chat-side">
            <div class="header">
                <div class="search">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="search" placeholder="搜索">
                </div>
                <div class="add-user">+</div>
            </div>
            <ul class="chat-list">
                @foreach($list as $v)
                    <li data-id="{{$v->id}}" data-sort="{{$v->sort}}" data-per={{$v->personal}}>
                        <img src="{{$v->url}}" alt="">
                        <div class="info">
                            <span class="title">{{$v->name}}</span>
                            <span class="con">{!!$v->lastWord!!}</span>
                        </div>
                        <div class="time">
                            <time>{{$v->time}}</time>
                        </div>
                    </li>
                @endforeach
            </ul>
            <ul class="user-list"></ul>
            <ul class="chat-list-op">
                <li class="sort"></li>
                <li class="rename">修改群名称</li>
                <li class="delete">删除聊天</li>
            </ul>
        </div>
        <div class="chat-bg">
            <img src="{{asset('images/chat/wechat-bg.png')}}" alt="">
        </div>
        <div class="chat-wrap">
            {{--表情--}}
            <div id="emotion">
                @for ($i = 1; $i <= 75; $i++)
                    <img src="/images/emoticon/{{$i}}.gif" alt="">
                @endfor
            </div>
            <div class="user-info">
                <img class="img-header" src="" alt="">
                <span class="name"></span><img class="sex" src="" alt="">
                <p class="count"></p>
            </div>
            <ul class="dialoge-op">
                @can('view chatHistory')
                    <li class="withdrawal">撤回</li>
                    <li class="delete">删除</li>
                @endcan
                <li class="clear">清屏</li>
            </ul>
            <div class="header">
                <h3 class="name"></h3>
                <span class="more" id="room-setting-more">▪ ▪ ▪</span>
            </div>
            <ul class="info-box" id="info-content">
                @can('view chatHistory')
                @else
                    <div id="sessionStorage"></div>
                @endcan
            </ul>
            <div id="nav-box">
                <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display: none">
            </div>
            <div class="txt-box">
                <div id="textarea" contenteditable="true"></div>
                <button class="chat-btn chat-btn-green" id="send">发送</button>
            </div>
        </div>
        <div id="info-tip">
            <span class="title"></span>
            <span id="tip-close">X</span>
            <div class="notice-user-info clearfix">
                <img src="" alt="">
                <span class="info">anyme<br>11:40</span>
            </div>
            <span class="con">

            </span>
            <button class="chat-btn chat-btn-green" id="confirm">确定</button>
            <button class="chat-btn chat-btn-defult" id="cancel">取消</button>
        </div>
        </div>
        {{--history--}}
        <div id="history">
            <span id="his-close">X</span>
            <input type="text" id="his-search" placeholder="搜索">
            <div class="info-box" id="info-history">
                <ul></ul>
            </div>
        </div>
        <div id="addUser-wrap">
            <span class="close-wrap">×</span>
            <div class="from-con">
                <div class="search">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="search" placeholder="搜索">
                </div>
                <ul class="from-list"></ul>
            </div>
            <div class="to-con">
                <span class="tips">请勾选需要添加的联系人</span>
                <ul class="to-list"></ul>
            </div>
            <button class="chat-btn" disabled="disabled" id="newRoom">确定</button>
            <button class="chat-btn chat-btn-defult cancel">取消</button>
        </div>
@endsection
@section('script')
    {{--<script src="http://{{Request::getHost()}}:6001/socket.io/socket.io.js"></script>--}}
    <script src="{{ asset('js/all.js') }}"></script>
    <script src="{{ asset('js/dropload.min.js') }}"></script>
    <script src="{{ asset('js/home.js') }}"></script>
    <script>
        $(function () {
            $('#history').draggable();
            $('#info-tip').draggable();
            $('#addUser-wrap').draggable();
        });
    </script>
@endsection
